<template>
	<view :class="themeName">
		<view :class="['goods-team', {'bg--primary': hasGoods}]">	

		
			<mescroll-uni
			  ref="mescroll"
			  :up="{
				noMoreSize: 5,
				empty: {
					icon: '/static/images/empty/shop.png',
					tip: '暂无拼团商品~',
					fixed: true
				},
				textColor: optionTextColor,
			  }"
			  :down="{
				textColor: optionTextColor,
			  }"
			  @init="mescrollInit"
			  @down="downCallback" 
			  @up="upCallback"
			>		
				<!-- Banner -->
				<view :class="['banner', {'bg--primary': !hasGoods}]">
					<image 
						class="title-image"
					  src="/bundle/static/images/goods_team_banner.png" 
					  
					/>
				</view>
				
				<!-- Goods List -->
				<view class="goods-contain">
					<view class="goods">
						<goods-card
							v-for="(goods, index) in goodsList"
							:key="index"
							shape="rectangle"
							:name="goods.name" 
							:image="goods.image" 
							:contain-style="{ 'border-raius': 0, 'height': '250rpx' }"
							:image-style="{ 'width': '210rpx', 'height': '210rpx' }"
						> 
							<!-- 拼团信息 -->
							<view class="flex">
								<goods-team-icon :count="goods.people_num" />
								<text class="m-l-20 xs muted">已拼{{ goods.activity_sales }}件</text>
							</view>
							<!-- 价格信息 -->
							<view class="m-t-10 flex row-between">
								<view>
									<price :content="goods.min_team_price" mainSize="34rpx" minorSize="24rpx" :color="themeColor"/>
									<price class="m-l-20 muted xs" :content="goods.max_price" :line-through="true" />
								</view>
								<view class="goods-button" @click="goGoodsDetail(goods.id)">去拼团</view>
							</view>
						</goods-card>
					</view>
				</view>
			</mescroll-uni>
			
			<view class="fixed-contain" @click="goOrderTeamList">
				<text>我的</text>
				<text>拼团</text>
			</view>
		</view>
	</view>
</template>


<script>
	import { apiGoodsTeamList } from '@/api/goods'
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
	
	export default {
		name: 'GoodsTeam',
		mixins: [MescrollMixin],
		
		data() {
			return {
				goodsList: [],				// 商家列表
			}
		},
		
		computed: {
			// 是否有拼团商品
			hasGoods() {
				return !!this.goodsList.length
			},
			
			// Scorll配置字体颜色
			optionTextColor() {
				return this.hasGoods ? '#FFFFFF' : '#808080'
			}
		},
		
		methods: {
			// 初始化Mescroll
			mescrollInit(mescroll) {
				this.mescroll = mescroll
				this.downCallback()
			},
			
			// 下拉刷新
			downCallback() {
				this.mescroll.resetUpScroll()
			},
			
			// 上拉加载更多
			upCallback(page) {
				apiGoodsTeamList({
					page_no: page.num,
					page_size: page.size,
				}).then(({ lists, page_size, count }) => {
					if (page.num === 1) this.goodsList = []
					this.goodsList = [...this.goodsList, ...lists]
					this.mescroll.endSuccess(lists.length, count)
				}).catch(err => {
					this.mescroll.endBySize()
				})
			},
			
			// 去商品详情
			goGoodsDetail(id) {
				this.$Router.push({
					path: '/bundle/pages/goods_team_detail/goods_team_detail',
					query: { id }
				})
			},
			
			// 去拼团订单列表
			goOrderTeamList() {
				this.$Router.push({
					path: '/bundle/pages/goods_team_history/goods_team_history'
				})
			},
		},

	}
</script>


<style lang="scss">
	.goods-team {
		display: flex;
		flex-direction: column;
		height: 100vh;
		max-height: 100vh;
		overflow: hidden;
		
		.banner {
			display: flex;
			align-items: center;
			justify-content: center;
			min-height: 100rpx;
			width: 100%;
			margin-bottom: 20rpx;
			.title-image {
				width:440rpx;
				height:48rpx;
			}
		}
		
		.goods-contain {
			padding: 0 20rpx;
		}
		
		.fixed-contain {
			position: fixed;
			right: 20rpx;
			bottom: 240rpx;
			z-index: 9;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 110rpx;
			height: 110rpx;
			border-radius: 50%;
			font-size: $-font-size-sm;
			font-weight: 500;
			border: $-solid-border;
			background-color: #FFFFFF;
		}
	}
	
	.bg--primary {
		@include background_linear()
	}
	

	.goods {
		margin-bottom: 20rpx;
		
		&-button {
			padding: 10rpx 35rpx;
			border-radius: 60px;
			font-size: $-font-size-nr;
			@include background_color();
			color: #FFFFFF;
		}
	}
</style>
